<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>音乐盒</title>
    <link rel="stylesheet" href="<%=request.getContextPath()%>/static/plugins/bootstrap-4.6.2-dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="<%=request.getContextPath()%>/static/plugins/bootstrap-icons-1.11.3/font/bootstrap-icons.min.css">
    <style>
        body {
            /* 设置背景图片路径，根据实际情况调整 */
            background-image: url('<%=request.getContextPath()%>/static/images/background/img_2.png');
            /* 背景图片不重复 */
            background-repeat: no-repeat;
            /* 背景图片尺寸为覆盖整个页面 */
            background-size: cover;
            /* 背景图片固定，不随页面滚动而滚动 */
            background-attachment: fixed;
        }
        .music-item {
            border: 1px solid #ccc;
            padding: 10px;
            margin-bottom: 10px;
            border-radius: 5px;
        }
        /* 让按钮和其他元素底部对齐 */
        .footer-btn {
            position: fixed;
            bottom: 20px;
            left: 50%;
            transform: translateX(-50%);
        }
    </style>
</head>
<body>
<div>
</div>
<div class="container mt-5">
    <h1 class="mb-4">音乐盒</h1>
    <div class="row">
        <div class="col-12">
            <button id="addToPlaylist" class="btn btn-success mb-3" data-user-id="${user.userId}">添加到播放列表</button>
            <table class="table table-hover">
                <thead>
                <tr>
                    <th scope="col">
                        <input type="checkbox" id="selectAll"> <!-- 全选复选框 -->
                    </th>
                    <th scope="col">序号</th>
                    <th scope="col">歌曲id</th>
<%--                    <th scope="col">分享者id</th>  &lt;%&ndash; 来自SongRequests表&ndash;%&gt;--%>
                    <%--以下数据来自Songs表，根据SongRequests表中的songId，查询Songs表中的这些数据--%>
                    <th scope="col">歌名</th>
<%--                    <th scope="col">上传路径</th>--%>
                    <th scope="col">歌曲描述</th>
                    <th scope="col">分类Id</th>
                    <th scope="col">操作</th>
                </tr>
                </thead>
                <tbody>
                <c:forEach var="musicBox" items="${sessionScope.musicBoxes}" varStatus="status">
                    <tr>
                        <td>
                            <input type="checkbox" class="songCheckbox" data-song-id="${musicBox.songId}">
                        </td>
                        <td>${status.index + 1}</td>
                        <td>${musicBox.songId}</td>
                        <td>${musicBox.songName}</td>
<%--                        <td>${musicBox.uploadPath}</td>--%>
                        <td>${musicBox.songDescription}</td>
                        <td>${musicBox.songCategory}</td>
                        <td>
                            <!-- 下载按钮 -->
                            <a href="<%=request.getContextPath()%>/song/download?id=${musicBox.songId}" class="btn btn-info btn-sm">
                                下载
                            </a>
<%--                            加个删除按钮--%>
                            <button class="btn btn-danger btn-sm ml-2 delete-btn" data-song-id="${musicBox.musicBoxId}">删除</button>
                        </td>
                    </tr>
                </c:forEach>
                </tbody>
            </table>
<%--            分页--%>
            <div class="row">
                <c:choose>
                    <c:when test="${totalPages > 1}">
                        <nav aria-label="Page navigation">
                            <ul class="pagination">
                                <!-- 上一页按钮 -->
                                <c:if test="${currentPage > 1}">
                                    <li class="page-item">
                                        <a class="page-link" href="<%=request.getContextPath()%>/song/getSongList?startIndex=${(currentPage - 2) * targetTotal}&targetTotal=${targetTotal}" aria-label="Previous">
                                            <span aria-hidden="true">&laquo;</span>
                                        </a>
                                    </li>
                                </c:if>
                                <!-- 动态生成页码 -->
                                <c:forEach var="i" begin="1" end="${totalPages}">
                                    <c:choose>
                                        <c:when test="${i <= 3 || (i > currentPage - 2 && i < currentPage + 2) || i == totalPages}">
                                            <li class="page-item <c:if test="${i == currentPage}">active</c:if>">
                                                <a class="page-link" href="<%=request.getContextPath()%>/song/getSongList?startIndex=${(i - 1) * targetTotal}&targetTotal=${targetTotal}">${i}</a>
                                            </li>
                                        </c:when>
                                        <c:otherwise>
                                            <!-- 在需要的地方显示 "..." -->
                                            <li class="page-item disabled">
                                                <span class="page-link">...</span>
                                            </li>
                                        </c:otherwise>
                                    </c:choose>
                                </c:forEach>
                                <!-- 下一页按钮 -->
                                <c:if test="${currentPage < totalPages}">
                                    <li class="page-item">
                                        <a class="page-link" href="<%=request.getContextPath()%>/song/getSongList?startIndex=${currentPage * targetTotal}&targetTotal=${targetTotal}" aria-label="Next">
                                            <span aria-hidden="true">&raquo;</span>
                                        </a>
                                    </li>
                                </c:if>
                            </ul>
                        </nav>
                    </c:when>
                    <c:otherwise>
                        <!-- 如果只有一页数据，不显示分页 -->
                        <p></p>
                    </c:otherwise>
                </c:choose>
            </div>
            <!-- 分享模态框 -->


        </div>
    </div>

    <!-- 返回主页按钮 -->
    <a href="<%=request.getContextPath()%>/" class="btn btn-secondary footer-btn">返回主页</a>
</div>

<script src="<%=request.getContextPath()%>/static/plugins/jquery/jquery.min.js"></script>
<script src="<%=request.getContextPath()%>/static/plugins/bootstrap-4.6.2-dist/js/bootstrap.bundle.js"></script>
<script src="<%=request.getContextPath()%>/static/js/util.js"></script>
<script src="<%=request.getContextPath()%>/static/js/musicBoxes/musicBoxes.js"></script>

<script>

</script>
</body>
</html>
